<template>
    <div>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="header">
                    <img src="@/assets/login_logo.png">
                    <p class="welcome">欢迎注册</p>
                </div>
            </el-header>
            <!-- 中间 -->
            <el-main>
                <div class="main">
                    <!-- 注册窗 -->
                    <el-card class="box-card">
                        <div class="card_header">
                            <span>账户注册</span>
                        </div>
                        <el-form ref="registerFormRef" :model="registerForm" label-width="80px"
                            :rules="registerFormRule">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="registerForm.password" placeholder="请输入密码" show-password></el-input>
                            </el-form-item>
                            
                            <el-form-item label="昵称" prop="nickname">
                                <el-input v-model="registerForm.nickname" placeholder="请输入昵称"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="registerForm.phone" placeholder="请输入电话号码"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button type="danger" @click="register">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</el-button>
                        <el-button type="info" @click="resetRegisterForm">重&nbsp;置&nbsp;表&nbsp;单</el-button>

                        <div class="card_footer"><a @click="goRegister" style="color:red"><i
                                    class="el-icon-d-arrow-right"></i>
                                已有账号？前往登录</a>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>

export default {
    name: 'Register',
    props: {

    },
    data() {
        // 校验手机号码规则
        const checkMobile = (rule, value, callback) => {
            const regMobile = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!regMobile.test(value)) {
                return callback(new Error('请输入合法的手机号码'))
            }
            callback()
        }
        return {
            //注册表单
            registerForm: {
                username: '',
                password: '',
                phone: '',
                nickname: ''
            },
            // 全部用户集合
            userlist: [],
            // 注册规则
            registerFormRule: {

                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' }

                ]


                
            }


        };
    },

    created() {
    },
    mounted() {
        this.getUserList();
    },
    methods: {

        async getUserList() {
            const res = await this.$API.getUser();
            console.log(res);
            this.userlist = res.data
        },
        goRegister() {
            this.$router.push('/login');
        },
        resetRegisterForm() {
            this.$refs.registerFormRef.resetFields();
        },
        register() {
            this.$refs.registerFormRef.validate(valid => {
                if (!valid) return
                this.userlist.forEach(item => {
                    if (item.username == this.registerForm.username) return this.$message.error('用户名已存在,请重新输入')

                })

                this.$API.registerUser(this.registerForm).then(res => {
                    if (res.code === "200") {
                      console.log(res);
                      this.$message.success("注册成功")
                      this.goRegister();
                    } else {
                      this.$message.error('注册失败')
                    }

                })



            })
        }
    }
};
</script>

<style scoped lang="less">
.header {
    display: flex;
    justify-content: left;
    height: 60px;
    width: 990px;
    margin: 0 auto;
    margin-top: 15px;

    .welcome {
        font-size: 25px;
        line-height: 73px;
        margin-left: 30px;
    }
}

//中间背景图
.el-main {
    height: 475px;
    background-image: url('@/assets/background.png');
    background-repeat: no-repeat;
    background-color: #E93854;
    background-position: center;
    margin-top: 50px;

    .main {
        width: 990px;
        margin: 0 auto;
        display: flex;
        justify-content: right;

        p {
            cursor: pointer;
            margin-top: 10px;
            font-size: 10px;
            color: #666;
            text-align: right;
        }
    }

    //登录卡片
    .box-card {
        width: 400px;
        height: 450px;
        text-align: center;

        .el-form-item {
            margin-bottom: 15px;
            margin-right: 20px;
        }

        .card_header {
            text-align: center;
            height: 55px;
            font-size: 25px;
            font-weight: bolder;
            line-height: 55px;
            color: #E93854;
        }

        .card_main {

            //输错提示
            .hint {
                height: 25px;
                color: #E4393C;
                font-size: 13px;
                line-height: 20px;
            }

            p {
                color: #3978e4;
            }
        }

        .el-button {
            outline: none;
            border: none;
            height: 33px;
            width: 300px !important;
            line-height: 8px;
            margin-top: 20px;
            margin-left: 25px;
            font-size: 20px;
            width: 100%;
            color: white;
        }

        .card_footer {
            padding: 0;
            height: 50px;
            font-size: 14px;
            line-height: 50px;
            text-align: right;
            color: #3978e4;
            margin-bottom: 0;

            a {
                cursor: pointer;
            }
        }
    }

}
</style>
